<!--
 * @Description:
 * @Author: zhoujj
 * @Date: 2020-05-26 10:31:35
 * @LastEditTime: 2020-05-26 14:34:33
 * @LastEditors: zhoujj
-->
<template>
    <div>
        <el-row :gutter="20" class="filter">
            <el-col :span="4">
                <div class="card card-bg-green">
                    <div class="font30"><CountTo :endVal="dataStatistics.sportNum" :duration="duration"></CountTo></div>
                    <div class="font14">运动项目</div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import CountTo from 'vue-count-to'
    export default {
        name: 'home-page',
        components: {
            CountTo
        },
        data () {
            return {
                duration: 3000,
                dataStatistics: {
                    sportNum: 13
                }
            }
        },
        mounted () {}
    }
</script>
<style lang="scss">
  @mixin jc-flex{
	display: flex;
	justify-content: center;
	align-items: center;
}
.card{
    text-align: center;
    padding:17px;
    border-radius: 12px;
    font-weight:500;
}
.card-bg-green{
    background:rgba(235,249,231,1);
    color: #88C533;
}
.font14{
    font-size: 14px;
}
.font30{
    font-size: 30px;
}
</style>
